<template>
    <e-dialog
    ref="eDialogRef"
     v-model="visable"
        :clickModal="false"
       
        :title="c_title"
        :auto="auto"
        :width="width"
        @closed="dialogClosed"
        @confirm="confirm"
    >
        <div class="p-20 dialog-form-body">
            <e-form
                ref="ruleFormRef"
                 :grid="grid"
                :formConfig="formConfig"
                :formRule="rules"
                :formData="formData"
            >
                <!-- 转父级的全部slot -->
                <template v-for="(item, i) in slotsArr">
                    
                    <template :slot="item">
                        <slot :name="item"> </slot>
                    </template>
                </template>
            </e-form>
        </div>
    </e-dialog>
</template>

<script>
export default {
    components: {
        'e-form': () => import('@/components/async/e-form.vue'),
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        rules: {
            type: Object,
            default: () => {
                return {}
            },
        },
        formConfig: {
            type: Array,
            default: () => {
                return []
            },
        },
        formData: {
            type: Object,
            default: () => {
                return {}
            },
        },

        // 校验通过时的确认弹窗提示
        text: {
            type: String,
            default: '',
        },

        // 提交前的自定义校验
        beforeSubmit: {
            type: Function,
            default: () => {
                return true
            },
        },
        apiKey: {
            type: String,
            default: '',
        },
        auto: {
            type: Boolean,
            default: true,
        },
        width: {
            type: String,
            default: '30%',
        },
        title: {
            type: String,
            default: '',
        },
        grid: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {}
    },
    computed: {
        visable: {
            get() { 
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
        slotsArr() {
            return Object.keys(this.$slots)
        },
        c_title() {
            if (this.title) {
                return this.title
            }

            if (this.auto) {
                return this.formData._id ? '编辑' : '新增'
            }
            return ''
        },
    },
    methods: {
        dialogClosed() {
            // 清空表单
            this.$refs.ruleFormRef.reset()
            this.$emit('input', false)
            this.$emit('closed')
        },
        async confirm() {
            const { text, beforeSubmit, apiKey } = this
            const res = await this.$refs.ruleFormRef.validateFn()
            if (!res) return
            const beforeSubmitType = this.getType(beforeSubmit)
            if (beforeSubmitType === 'function') {
                const res1 = beforeSubmit()
                if (!res1) return
            }
            if (beforeSubmitType === 'asyncfunction') {
                const res1 = await beforeSubmit()
                if (!res1) return
            }

            if (text) {
                const res1 = await this.$confirm(text)
                if (!res1) return
            }
            if (apiKey) {
                try {
                    const data = await this.$apis[apiKey](this.formData)
                    if (data.msg) {
                        this.$message.success(data.msg)
                    }
                    this.dialogClosed()

                    this.$emit('confirm', data)

                    // 自动触发父组件的initTable
                    if (this.$parent.initTable) {
                        this.$parent.initTable()
                    }
                    return
                } catch (err) {
                    this.Toast(err)
                }
            }
            this.$emit('confirm')
        },
    },
}
</script>

<style lang="scss" scoped></style>
